<template>
  <div id="container">
    <el-row>
      <el-col :xs="24"
              :md="9">
        <section class="left">
          <navigation></navigation>
          <section class="content">
            <h2 class="phrase">
              <span class="slide1">{{msg}}</span>
              <span class="slide2">{{msg}}</span>
            </h2>
            <section class="tag">
              <h2 class="title">
                <i class="iconfont">&#xe60d;</i> 标签云
              </h2>
              <div class="container">
                <Tag></Tag>
              </div>
            </section>
          </section>
        </section>
      </el-col>
      <el-col :xs="24"
              :md="15">
        <content-body :article="article"></content-body>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import Navigation from "../module/navigation";
import Tag from "../module/tag";
import ContentBody from "../module/contendBody";
export default {
  components: {
    Tag,
    ContentBody,
    Navigation,
  },
  data() {
    return {
      msg: "今天也要努力加油鸭!",
      timer: "",
      article: [],
    };
  },
  mounted() {
    this.slide();
    this.$axios.get("http://localhost:3000/article/v1/get").then((res) => {
      this.article = res.data;
      this.article.forEach((item) => {
        item.createdAt = new Date(parseInt(item.createdAt)).toLocaleString();
      });
    });
  },
  beforeDestory() {
    clearInterval(this.timer);
    this.timer = null;
  },
  methods: {
    slide() {
      let elem1 = document.getElementsByClassName("slide1")[0],
        elem2 = document.getElementsByClassName("slide2")[0],
        elem1_left = parseInt(window.getComputedStyle(elem1, null)["left"]),
        elem2_left = parseInt(window.getComputedStyle(elem2, null)["left"]);
      this.timer = setInterval(() => {
        elem1.style.left = elem2_left == 0 ? "360px" : elem1_left - 1 + "px";
        elem2.style.left = elem1_left == 0 ? "360px" : elem2_left - 1 + "px";
        elem1_left = parseInt(elem1.style.left);
        elem2_left = parseInt(elem2.style.left);
      }, 20);
    },
  },
};
</script>

<style lang="less" scoped>
#container {
  width: 100%;
  height: 100%;

  @media (min-width: 992px) {
    .el-row,
    .el-col {
      height: 100%;
    }
  }

  .left {
    width: 100%;
    height: 100%;

    .content {
      width: 100%;

      .phrase {
        margin: 0 auto;
        width: 360px;
        height: 37px;
        font-size: 28px;
        color: #f56c6c;
        text-align: center;
        position: relative;
        overflow: hidden;
        margin-bottom: 60px;

        .slide1 {
          position: absolute;
          left: 0px;
          width: 400px;
        }
        .slide2 {
          position: absolute;
          left: 360px;
          width: 400px;
        }
      }
      .tag {
        width: 360px;
        margin: 0 auto;
        height: 400px;
        display: none;

        .title {
          width: 100%;
          height: 60px;
          box-sizing: border-box;
          padding: 18px 20px;
          border: 1px solid #eaecef;
        }
        .container {
          width: 100%;
          height: 100%;
        }
      }
      @media (min-width: 992px) {
        .tag {
          display: block;
        }
      }
    }
  }
}
</style>